﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
  <title>乐优商城--商品搜索结果页</title>
  <link rel="icon" href="assets/img/favicon.ico">

  <script src="./js/vue/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/common.js"></script>
  <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
  <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
  <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
  <link href="./css/index.css" rel="stylesheet">
  <script src="./js/index.js"></script>
  <style type="text/css">
    * {
      box-sizing: unset;
    }

    .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
      width: 46px;
      height: 23px;
      border: 1px solid #DDD;
      background: #FFF;
      line-height: 23px;
      font-family: "\5b8b\4f53";
      text-align: center;
      font-size: 16px;
      color: #AAA;
      text-decoration: none;
      out-line: none
    }

    .btn-arrow:hover {
      background-color: #1299ec;
      color: whitesmoke;
    }

    .top-pagination {
      display: block;
      padding: 3px 15px;
      font-size: 11px;
      font-weight: 700;
      line-height: 18px;
      color: #999;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
      text-transform: uppercase;
      float: right;
      margin-top: 6px
    }

    .top-pagination span {
      margin-right: 10px;
    }

    .logo-list li {
      padding: 8px;
    }

    .logo-list li:hover {
      background-color: #f3f3f3;
    }

    .type-list a:hover {
      color: #1299ec;
    }

    .skus {
      list-style: none;
    }

    .skus li {
      list-style: none;
      display: inline-block;
      float: left;
      margin-left: 2px;
      border: 2px solid #f3f3f3;
    }

    .skus li.selected {
      border: 2px solid #dd1144;
    }

    .skus img {
      width: 25px;
      height: 25px;
    }

    .showMoreBtn {
      line-height: 18px;
      font-size: 12px;
      display: inline-block;
      padding: 3px 15px;
      width: 80px;
      margin-top: 3px;
      margin-bottom: 3px;
    }

    .showMoreBtn:hover {
      background-color: lightgrey;
    }
  </style>
  <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
  <div id="nav-bottom">
    <ly-top/>
  </div>


  <!--list-content-->
  <div class="main">
    <div class="py-container">

      <div class="bread">
        <!--面包屑-->
        <ul class="fl sui-breadcrumb">
          <li><span>全部结果:</span></li>
          <li v-for="(b,i) in breads" :key="b.id">
            <a v-if="i != 2" href="#">{{b.name}}</a>
            <span v-else>{{b.name}}</span>
          </li>
        </ul>
        <!--已选择过滤项-->
        <ul class="tags-choose">
          <li class="tag" v-for="(v,k) in search.filter" v-if="k !== '分类'">
            {{k}}:<span style="color: red">{{getFilterValue(k,v)}}</span>
            <i class="sui-icon icon-tb-close" @click="removeFilter(k)"></i>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <!--过滤项-->
      <div class="clearfix selector">
        <div class="type-wrap" v-for="(v,k,i) in remainFilters" :key="k"
             v-if="k!=='品牌'" v-show="i < 5 || showMore">
          <div class="fl key">{{k}}</div>
          <div class="fl value">
            <ul class="type-list">
              <li v-for="(o,j) in v" :key="j" @click="selectFilter(k, o.id || o)">
                <a>{{o.name || o}}</a>
              </li>
            </ul>
          </div>
          <div class="fl ext"></div>
        </div>
        <div class="type-wrap logo" v-else>
          <div class="fl key brand">{{k}}</div>
          <div class="value logos">
            <ul class="logo-list">
              <li v-for="(o,j) in v" :key="j" v-if="o.image" @click="selectFilter(k, o.id)"><img :src="o.image"/></li>
              <li style="text-align: center" v-else @click="selectFilter(k, o.id)">
                <a style="line-height: 30px; font-size: 12px" href="#">{{o.name}}</a>
              </li>
            </ul>
          </div>
          <div class="fl ext">
            <a href="javascript:void(0);" class="sui-btn">多选</a>
          </div>
        </div>
        <!--按钮-->
        <div class="type-wrap" style="text-align: center" v-show="Object.keys(remainFilters).length >= 5">
          <span @click="showMore=true" v-show="!showMore" class="showMoreBtn">
            更多
            <i class="el-icon-caret-bottom"></i>
          </span>
          <span @click="showMore=false" v-show="showMore" class="showMoreBtn">
            收起
            <i class="el-icon-caret-top"></i>
          </span>
        </div>
      </div>
      <!--details-->
      <div class="details">
        <!--导航条-->
        <div class="sui-navbar">
          <div class="navbar-inner filter">
            <ul class="sui-nav">
              <li class="active">
                <a href="#">综合</a>
              </li>
              <li>
                <a href="#">销量</a>
              </li>
              <li>
                <a href="#">新品</a>
              </li>
              <li>
                <a href="#">评价</a>
              </li>
              <li>
                <a href="#">价格</a>
              </li>
            </ul>
            <div class="top-pagination">
              <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
              <span><i style="color: red;">{{search.page}}</i>/{{totalPage}}</span>
              <a class="btn-arrow" href="#" @click.prevent="prevPage" style="display: inline-block">&lt;</a>
              <a class="btn-arrow" href="#" @click.prevent="nextPage" style="display: inline-block">&gt;</a>
            </div>
          </div>
        </div>
        <!--商品列表-->
        <div class="goods-list">
          <ul class="yui3-g">
            <li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
              <div class="list-wrap">
                <div class="p-img">
                  <a :href="'/item/'+goods.id+'.html'" target="_blank"><img :src="goods.selectedSku.image" height="200"/></a>
                  <!--多sku图片列表-->
                  <ul class="skus">
                    <li :class="{selected: sku.id == goods.selectedSku.id}" v-for="sku in goods.skus" :key="sku.id"
                        @mouseenter="goods.selectedSku=sku">
                      <img :src="sku.image">
                    </li>
                  </ul>
                </div>
                <div class="clearfix"></div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>{{ly.formatPrice(goods.selectedSku.price)}}</i>
                  </strong>
                </div>
                <div class="attr" style="overflow: hidden">
                  <em>{{goods.selectedSku.title}}</em>
                </div>
                <div class="cu" style="overflow: hidden">
                  <em><span>促</span><em v-html="goods.subTitle"></em></em>
                </div>
                <div class="commit">
                  <i class="command">已有2000人评价</i>
                </div>
                <div class="operate">
                  <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                  <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                  <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="fr">
          <!--分页-->
          <div class="sui-pagination pagination-large">
            <ul style="width: 550px">
              <li :class="{prev:true,disabled:search.page === 1}">
                <a href="#" @click.prevent="prevPage">«上一页</a>
              </li>
              <li :class="{active: index(i) === search.page}" v-for="i in Math.min(5,totalPage)" :key="i">
                <a href="#" @click.prevent="search.page=index(i)">{{index(i)}}</a>
              </li>
              <li class="dotted" v-show="totalPage > 5"><span>...</span></li>
              <li :class="{next:true,disabled:search.page === totalPage}">
                <a href="#" @click.prevent="nextPage">下一页»</a>
              </li>
            </ul>
            <div>
              <span>共{{totalPage}}页&nbsp;</span>
              <span>
            到第
            <input type="text" class="page-num" :value="search.page">
            页 <button class="page-confirm" onclick="alert(1)">确定</button>
        </span>
            </div>
          </div>
        </div>
      </div>
      <!--hotsale-->
      <div class="clearfix hot-sale">
        <h4 class="title">热卖商品</h4>
        <div class="hot-list">
          <ul class="yui3-g">
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_01.png"/>
                </div>
                <div class="attr">
                  <em>Apple苹果iPhone 6s (A1699)</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_03.png"/>
                </div>
                <div class="attr">
                  <em>金属A面，360°翻转，APP下单省300！</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_04.png"/>
                </div>
                <div class="attr">
                  <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4068.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有20人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_02.png"/>
                </div>
                <div class="attr">
                  <em>Apple苹果iPhone 6s (A1699)</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>

<script type="text/javascript">
  const vm = new Vue({
    el: "#searchApp",
    data: {
      ly, // 自定义工具对象 ly
      search: {
        key: "", // 搜索关键字
        page: 1, // 当前页码
        filter: {} // 选中的过滤项
      },
      goodsList: [], // 商品列表
      total: 0, // 总条数
      totalPage: 0, // 总页数
      filterList: {}, // 过滤项
      showMore: false, // 是否显示更多过滤项
      breads: [] // 商品分类面包屑
    },
    created() {
      // 获取url路径中的参数
      const key = ly.getUrlParam("key");
      // 判断是否有请求参数
      if (!key) {
        return;
      }
      // 获取hash属性
      const hash = ly.parse(location.hash.substring(1));
      // 初始化属性
      hash.key = key;
      hash.page = hash.page ? parseInt(hash.page) : 1;
      hash.filter = hash.filter || {};
      this.search = hash;
      // 初始加载
      // this.loadData();
      // this.loadFilterList();
    },
    watch: {
      "search.page": {
        handler(val) {
          // 把search对象中除了key以外的属性变成请求参数，
          const {key, ...obj} = this.search;
          // 拼接在url路径的hash中
          window.location.hash = "#" + ly.stringify(obj);
          // 因为hash变化不引起刷新，需要手动调用loadData
          this.loadData();
        }
      },
      "search.filter": {
        deep: true,
        handler(val) {
          // 把search对象中除了key以外的属性变成请求参数，
          const {key, ...obj} = this.search;
          // 拼接在url路径的hash中
          window.location.hash = "#" + ly.stringify(obj);
          // 因为hash变化不引起刷新，需要手动调用loadData
          this.loadData();
          // 还要加载新的过滤项
          this.loadFilterList();
        }
      }
    },
    methods: {
      loadData() {
        // 发起异步请求
        ly.http.post("/search/page", this.search)
          .then(resp => {
            // 分页数据：
            this.total = resp.data.total;
            this.totalPage = resp.data.totalPage;
            // 处理sku，
            resp.data.items.forEach(goods => {
              // 变为JS对象
              goods.skus = JSON.parse(goods.skus);
              // 添加默认选中的sku
              goods.selectedSku = goods.skus[0];
            });
            // 商品列表
            this.goodsList = resp.data.items;
          })
      },
      loadFilterList() {
        // 发起请求，查询过滤项
        ly.http.post("/search/filter", this.search)
          .then(resp => {
            this.filterList = resp.data;
            // 判断分类的数量是否是一个
            const categories = this.filterList['分类'];
            if (categories.length === 1) {
              // 查询分类信息，写入面包屑
              ly.http.get("/item/category/levels?id=" + categories[0].id)
                .then(resp => this.breads = resp.data);
            }
          })
      },
      index(i) {
        if (this.search.page <= 3 || this.totalPage <= 5) {
          // 当前页小于3，则页码就是从 i 开始
          return i;
        } else if (this.search.page <= this.totalPage - 2) {
          // 大于3，则从page-2开始，然后逐个加1
          return this.search.page - 3 + i;
        } else {
          return this.totalPage - 5 + i;
        }
      },
      prevPage() {
        if (this.search.page > 1) {
          this.search.page--
        }
      },
      nextPage() {
        if (this.search.page < this.totalPage) {
          this.search.page++
        }
      },
      selectFilter(key, val) {
        // 复制原来的search
        const {...obj} = this.search.filter;
        // 添加新的属性
        obj[key] = val;
        // 赋值给search
        this.search.filter=obj;
      },
      getFilterValue(key,value){
        if(!this.filterList[key]){
          return "";
        }
        if(key === '品牌'){
          return this.filterList[key][0].name;
        }
        return value;
      },
      removeFilter(k){
        // 复制原来的search的filter
        const {...obj} = this.search.filter;
        // 删除属性
        delete obj[k]
        // 赋值给search
        this.search.filter=obj;
      }
    },
    computed:{
      remainFilters(){
        // 获取已经选中的过滤项的key
        const keys = Object.keys(this.search.filter);
        // 定义空对象，记录符合条件的过滤项
        const obj = {};
        // 遍历全部过滤项
        Object.keys(this.filterList).forEach(key => {
          // 过滤掉已经包含在已选中的过滤项中的，还有待选项不超过1个的
          if(!keys.includes(key) && this.filterList[key].length > 1){
            obj[key] = this.filterList[key];
          }
        });
        return obj;
      }
    },
    components: {
      lyTop: () => import("./js/pages/top.js")
    }
  });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
  <div class="tbar-cart-item">
    <div class="jtc-item-promo">
      <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
      <div class="promo-text">已购满600元，您可领赠品</div>
    </div>
    <div class="jtc-item-goods">
      <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
      <div class="p-name">
        <a href="#">{1}</a>
      </div>
      <div class="p-price"><strong>¥{3}</strong>×{4}</div>
      <a href="#none" class="p-del J-del">删除</a>
    </div>
  </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
    $("#service").hover(function () {
      $(".service").show();
    }, function () {
      $(".service").hide();
    });
    $("#shopcar").hover(function () {
      $("#shopcarlist").show();
    }, function () {
      $("#shopcarlist").hide();
    });

  })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>